<template>
  <div>
    <div class="top">
      <div>
        <h1 class="title01">用户管理</h1>
      </div>
      <div class="right">
        <el-form :model="Inquireform" label-width="auto">
          <div class="query">
            <el-form-item label="用户名" width="200px">
              <el-input v-model.trim="Inquireform.username" />
            </el-form-item>
            <el-button
              type="primary"
              style="margin-left: 30px"
              @click="handleSearch(Inquireform)"
              >搜索</el-button
            >
            <el-button type="primary" @click="handleAdd(0)">新增</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <el-table :data="tablelist" style="width: 100%" empty-text="暂无数据">
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ startIndex + $index }}
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="status" label="用户状态" width="120px">
        <template #default="scope">
          <el-select
            placeholder="请选择状态"
            v-model="scope.row.status"
            v-show="scope.row.status === 3 ? false : true"
            @change="handleSelectChange(scope.row)"
          >
            <el-option label="禁用" :value="0" />
            <el-option label="正常" :value="1" />
            <el-option label="已删除" :value="2" />
          </el-select>
          <span v-show="scope.row.status === 3 ? true : false">待激活</span>
        </template>
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间" />
      <el-table-column prop="createby" label="创建人">
        {{ Storagename }}
      </el-table-column>
      <el-table-column prop="updatetime" label="修改时间" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作" width="190px">
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
          >
            重置密码
          </el-button>
          <el-button
            link
            type="primary"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:page-size="queryParams.pageSize"
      :page-sizes="[5, 10, 15]"
      layout="  prev, pager, next"
      :total="queryParams.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <!-- 修改搜索-->

    <!-- 添加验证修改提示信息 -->
    <el-dialog
      v-model="Modified"
      title="新增用户"
      width="500"
      :before-close="handleDialog"
    >
      <div>
        <el-form
          :model="ReviseFrom"
          label-width="auto"
          style="max-width: 600px"
          :rules="rules"
          ref="ruleFormRef"
        >
          <el-form-item label="用户名称" prop="username">
            <el-input v-model="ReviseFrom.username" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleAddSure(ReviseFrom)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  getList,
  getSearch,
  getDelete,
  getAdd,
  getupdata,
} from "@/api/User/index";
import { onMounted, reactive, ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
let Modified = ref(false);
let queryParams = reactive({
  pageNum: 1,
  pageSize: 5,
  total: 0,
});
const tablelist = ref([]);
const Inquireform = ref([]);
const ReviseFrom = reactive({});
const startIndex = computed(() => {
  return (queryParams.pageNum - 1) * queryParams.pageSize + 1;
});

// 设置序号
// 创建人
const userinfo = ref(JSON.parse(sessionStorage.getItem("userinfo")));
const Storagename = userinfo._rawValue.username;
onMounted(() => {
  getListitem();
});
// 渲染列表
const getListitem = () => {
  getList(queryParams).then((res) => {
    tablelist.value = res.data.records;
    queryParams.total = res.data.total;
  });
};
// 分页
const handleCurrentChange = (val) => {
  queryParams.pageNum = val;
  getListitem();
};
const handleSizeChange = (val) => {
  queryParams.pageSize = val;
  getListitem();
};

// 搜素按钮
const handleSearch = (e) => {
  if (e.username) {
    getSearch(e.username).then((res) => {
      tablelist.value = res.data.records;
      queryParams.total = res.data.total;
    });
  } else {
    getListitem();
  }
};

// 删除数据
const handleDelete = (id, row) => {
  ElMessageBox.confirm("确定删除该数据吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      getDelete(row.uid).then((res) => {
        getListitem();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
// 新增按钮
const handleAdd = () => {
  Modified.value = true;
};
// 重置密码按钮
const handleEdit = (e, row) => {
  console.log(e);
  const formdata = {
    password: 123456,
    uid: row.uid,
  };
  ElMessageBox.confirm("确定重置密码为123456吗?", "success", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success",
  })
    .then(() => {
      getupdata(formdata).then((res) => {
        ElMessage({
          message: "密码重置成功",
          type: "success",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
// 表达重置
const clearForm = () => {
  ReviseFrom.username = "";
};

// 新增
const handleAddSure = (e) => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      getAdd(e).then((res) => {
        ElMessage({
          message: "新增成功",
          type: "success",
        });
        getListitem();
        Modified.value = false;
        clearForm();
      });
    } else {
      ElMessage.error("表单验证不通过，请检查填写的信息");
    }
  });
};

const handleClose = () => {
  (Modified.value = false), clearForm();
};
const handleDialog = () => {
  (Modified.value = false), clearForm();
};

// 表单验证
const rules = reactive({
  username: [
    { required: true, message: "请填写用户名", trigger: "blur" },
    { min: 3, max: 8, message: "最少三个字最多八个字", trigger: "blur" },
  ],
});

const ruleFormRef = ref();

let selectlist = ref();
const handleSelectChange = (Event) => {
  selectlist = {
    status: Event.status,
    uid: Event.uid,
  };
  getupdata(selectlist)
    .then((res) => {
      ElMessage({
        message: "用户状态修改成功",
        type: "success",
      });
    })
    .catch((error) => {
      console.log(error);
    });
};
</script>

<style lang="scss" scoped>
.top {
  height: 2vh;
  padding: 30px 0px;
  /* background-color: #f9f9f9; */
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  /*顶部标题 */
  .title01 {
    font-size: 20px;
    font-weight: bold;
    border-left: 5px solid #409eff;
    padding-left: 10px;
  }

  .right {
    width: 400px;
    display: flex;

    .query {
      display: flex;
      margin-right: 20px;
    }
  }
}
</style>
